<template>
  <div class="login-container">
    <el-form class="login-form" ref="loginFormRef" :model="loginForm" :rules="loginRules">
      <div class="title-container">
        <h3 class="title">{{ $t('msg.login.title') }}</h3>
      </div>
      <!--中英文切换-->
      <LangSelect class="lang-select"></LangSelect>
      <!--username-->
      <el-form-item prop="username">
        <span class="svg-container">
           <svg-icon icon="user"></svg-icon>
        </span>
        <el-input v-model="loginForm.username" placeholder="请输入用户名" name="username" type="text"/>
      </el-form-item>
      <!--password-->
      <el-form-item prop="password">
        <span class="svg-container">
            <svg-icon icon="password"></svg-icon>
        </span>
        <el-input v-model="loginForm.password" placeholder="请输入密码" name="password" :type="passwordType"/>
        <span class="show-pwd">
          <span class="svg-container">
            <svg-icon :icon="passwordType === 'password' ? 'eye' : 'eye-open'" @click="onchangePwdType"></svg-icon>
          </span>
        </span>
      </el-form-item>
      <!--登录按钮-->
      <el-button
          type="primary"
          style="width: 100%;
          margin-bottom: 30px"
          :loading="loading"
          @click="handlerLogin">

        {{ $t('msg.login.loginBtn') }}
      </el-button>
      <!--登录描述信息-->
      <div class="tips" v-html="$t('msg.login.desc')">
      </div>
    </el-form>
  </div>
</template>

<script setup>
import LangSelect from '@/components/LangSelect/index'
import { ref } from "vue";
import { validatePassword } from "@/views/login/rules";
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
//登录表单数据源
const loginForm = ref({
  username: 'super-admin',
  password: '123456',
})
// 验证规则
const i18n = useI18n()
const loginRules = ref({
  username: [
    {
      required: true,
      trigger: 'blur',
      message: i18n.t('msg.login.usernameRule')
    }
  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      validator: validatePassword() // 自定义验证规则
    },
  ]
})

// 处理密码明文显示
const passwordType = ref('password')

// template 中绑定的方法直接声明即可应用
const onchangePwdType = () => {
  // 当passwordType为password时 改为text
  // 使用ref声明的数据，在使用时需要加.value获取具体值，但是在template不用加
  if (passwordType.value === 'password'){
    passwordType.value = 'text'
  }else {
    passwordType.value = 'password'
  }
}

// 处理登录
const loading = ref(false)
const store = useStore()
const loginFormRef = ref(null) // 它自动会去template找，找到赋值过来 vue3 setup语法不能用 this.$refs.loginFormRef
const router = useRouter()
const handlerLogin = () => {
  // 1. 表单校验
  console.log(loginFormRef.value)
  loginFormRef.value.validate(valid => {
    if (!valid) return
    // 2.触发登录
    loading.value = true

    store.dispatch('user/login', loginForm.value)
        .then(() => {
          loading.value = false
          // 3.登录后处理 TODO
          router.push('/')
        })
        .catch(err => {
          console.log(err)
          loading.value = false
        }).finally(() => {
          loading.value = false
      })
  })
}

</script>

<style scoped lang="scss">
$bg: #2d3a4b;
$bg_img: '@/assets/cool-background.png';
$dark_gray: #889aa4;
$light_gray: #eee;
$cursor: #fff;
//background-image: url($bg_img); // 切换背景的
//background-size: 100% 100%;

.login-container {
  display: flex;
  min-height: 100%;
  width: 100%;
  //background-color: $bg;
  background-image: url($bg_img); // 切换背景的
  background-size: 100% 100%;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;

    :deep(.el-form-item) {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }

    :deep(.el-input) {
      display: inline-block;
      //border: none;
      height: 47px;
      width: 85%;
      --el-input-focus-border-color: none;
      --el-input-border-color: none;
      --el-input-hover-border-color: none;

      //修改element-plus 输入框的原本样式 ,只适用于login页面 不适合提到全局
      .el-input__wrapper {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;
        box-shadow: none;
      }

      //修改element-plus 输入框的原本样式 只适用于login页面 不适合提到全局
      .el-input__inner {
        color: $light_gray; //输入框 - 字体颜色
        font-size: 20px; //输入框 - 字体颜色
      }
    }
  }

  // 登录提示信息样式
  .tips {
    font-size: 16px;
    color: white;
    line-height: 24px;
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
  // login页面的 语言下拉选项
  :deep .lang-select {
    position: absolute;
    top: 165px;
    right: 36px;
    background-color: #fff;
    font-size: 22px;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
  }
}

/*
  以下css代码是来自 https://animista.net/play  -> 控制按钮的动态效果
*/
.el-button{
    -webkit-animation: bounce-top 0.9s both;
    animation: bounce-top 0.9s both;
}
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
    transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
    transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}

</style>
